<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Vue. 支持在｛｛｝｝插值的尾部添 一小管道符 对数据 滤，经常用于格式-->
<!--，比如字母全部大写、货币千位使用逗号分隔等。过滤 是自定义的， 通过给 Vue 实例添-->
<!--加选项 filters 来设置 例如在上 节中实 显示当前时间的 例，可以 时间进行格式化处-->
<div id="app" >
  {{date|formateDate}}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!--  // 在月份、日期、小时等小于 10 时前面-->
    <script>
        var padDate = function (value){
            return value<10?'0'+value:value;
        };

        var app = new Vue({
            el: '#app',
            data:{
                date: new Date()
            },
            filter:{
                formatDate: function (value){
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = padDate(date.getMonth()+1);
                    var day = padDate(date.getDay());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());

                    return year+'-'+month+'-'+day+' '+hours+":"+minutes+":"+seconds;
                }
            },
            mounted: function (){
                var _this=this;
                this.timer = setInterval(function (){
                    _this.date = new Date();
                },1000);
            },
            beforeDestroy: function (){
                if(this.timer){
                    clearInterval(this.timer);
                }
            }

        })
    </script>
</body>
</html>